<template>
    <div class="blogDetail">
        <div class="title">
            <h1>归档</h1>

        </div>
        <div class="detailBox">
            <div :key="item.id" class="blogItem" v-for="item in blogList " @click="openBlog(item.id)" >
                {{item.title}}
            </div>

        </div>


    </div>
</template>

<script>
    export default {
        name: "Archived",
        data() {
            return {
              blogList: []
            }
        },
      created() {
          this.axios.get('http://shilezhi.club:8082/Api/Blog/GetAllSub').then(
              response=>{
                console.log(response.data)
                this.blogList = response.data.blogList
              },
              error => {
                console.log(error)
              }
          )
      },
      methods:{
              openBlog(id){
                // console.log(id)
                this.$router.push(({path:'/BlogDetail',query:{blogId:id}}))
              }

      },
    }
</script>

<style scoped>
    @media screen and (max-width: 768px) {
        .title {
            padding: 0.9375rem !important;
        }

    }

    .blogDetail {
        display: flex;
        box-sizing: border-box;
        background-color: inherit;
        width: 100%;
        flex-direction: column;
        /*padding:1.25rem;*/
        background-color: #f1f3f4;

    }

    .title {
        box-sizing: border-box;
        padding: 1.25rem;
        background-color: #f9f9f9;
    }

    .title h1 {
        font-size: 2.25rem;
        color: black;
        line-height: 1.42857143;
        font-weight: 300;
    }

    .title span {
        font-size: 0.8125rem;
    }

    .detailBox {
        display: flex;
        border-radius: 0.25rem;
        padding: 1.25rem;
        flex-wrap: wrap;
    }

    .blogItem {
        font-size: 1.5rem;
        padding: 1rem;
        margin: 1rem;
        flex-shrink: 0;
        border-radius: 1.25rem;
      background: #448bff linear-gradient(
          45deg,#448bff,#44e9ff);
      color: #fff;

    }
    .blogItem:hover{
      cursor: pointer;
      transform: scale(1.1);
      transition: 0.5s;
    }

</style>